<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <script>

    // const box = document.querySelectorAll('.box')
    // console.log(box, 'box')

    // let a = 1;
    // a = 2;
    // console.log(a, 'a')

    // const a = 1;
    // a = 2;
    // // Assignment to constant variable.
    // console.log(a, 'a')

    // const arr = ['上海', '奉贤区', '海湾']
    // arr[0] = '八维宏烨教育'
    // // 数组是一个引用类型  靠
    // console.log('arr: ', arr)

    // {
    //   // var a = 1;
    //   let a = 1;
    //   // Identifier 'a' has already been declared
    // }
    // console.log(a, 'a') //  a is not defined

    /*
     异步现象：
      1. 定时器
      2. http请求 axios请求数据 
      3. 事件
    
     异步获取结果的解决方案：
      1. 回调函数
      2. promise
      3. async await

     回调函数：
      1. 一个函数 
      2. 作为参数
      3. 传递到其他函数中
      4. 并且执行 

      函数在执行的过程中，会把实参 传递给形参
    */
    // 回调函数模式
    // function exec(fn) {
    //   // 异步代码
    //   setTimeout(() => {
    //     const str = 'i miss you'
    //     fn && fn(str)
    //   }, 2000)
    // }

    // exec((res) => {
    //   console.log(res, 'res')
    // })


    // ...params rest  
    // function exec({ success, fail, ...params }) {
    //   console.log(params, 'params')
    //   // 异步代码
    //   setTimeout(() => {
    //     const str = 'i miss you'
    //     if (fail) {
    //       fail('fail')
    //     } else {
    //       success && success(str)
    //     }
    //   }, 2000)
    // }

    // exec({
    //   success: function (res) {
    //     console.log(res, 'res')
    //   },
    //   fail(fail) {
    //     console.log(fail)
    //   },
    //   name: 'devin-wang',
    //   age: 18,
    //   gender: 'male',
    //   work: 'bw',
    //   date: '2020-0418',
    //   address: 'shanxi sheng'
    // })

    // 定义promise的时候，封装在函数内部
    // new Promise（function（resolve，reject）「」）
    // resolve  抛出一个成功的结果
    // reject   抛出一个失败的结果
    // pedding  等待过程

    // pedding   ====》  resolve
    // pedding   ====》  reject
    // 结果不可逆：一旦这个结果成功或者失败，就再也回不去了


    // promise 如何获取到结果呢 通过.then调用（res => {  }）
    /*
     promise 
    */
    // function exec(str) {
    //   const promise = new Promise((resolve, reject) => {
    //     // 异步代码
    //     setTimeout(() => {
    //       resolve(str + ' too');
    //     }, 2000)
    //   })
    //   return promise;
    // }

    // const str = 'i miss you'
    // exec(str)
    //   .then(function (res) {
    //     console.log(res)
    //   })

    /*
     async await 异步函数
     1. async 返回promise对象
     2. await 后面跟一个promise对象
     3. await必须放在async的函数中

     优点：
     可以把异步代码以同步的方式输出
     返是promise都是通过 .then调用然后获取结果
    */

    // setTimeout(() => {
    //   console.log('open')
    // }, 2000)
    // setTimeout(() => {
    //   console.log('fang')
    // }, 3000)
    // setTimeout(() => {
    //   console.log('close')
    // }, 1000)

    // // 大象放在冰箱内。三部
    function exec(str, time) {
      return new Promise((resolve, reject) => {
        // 异步代码
        setTimeout(() => {
          console.log('str: ', str, time)
          resolve(str);
        }, time)
      })
    }

    async function auto() {
      const data1 = await exec('open 🐘', 2000)
      const data2 = await exec('fang da xiang', 3000)
      const data3 = await exec('close 🐘', 1000)

      return 'success'
    }

    auto()
      .then(res => {
        console.log(res, 'res')
      })



  </script>
</body>

</html>